@import  './../../../style/font';
@import './../../../style/color';

.plate-title{
  display: inline-block;

  & > p {
    display: inline-block;
  }
  & > span{
    display: inline-block;
  }
  .plate-p{
    font-family: $DFYuanW7-GBK;
    vertical-align: top;
    background-color: $btn-border-color;
    min-width: 250px;
  //  width: 25%;

    .plate-text{
      display: inline-block;
      font-size: 30px;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 70px;
      height: 70px;
      margin-left: 35px;
      width: 100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }

  .plate-triangle{
    width: 54px;
    height: 0;
    border-bottom: 75px solid $btn-border-color;
    border-right: 45px solid transparent;
  }
  .plate-parallelogram{
    margin-left: 10px;
    width: 20px;
    height: 30px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    background: $btn-border-color;
  }
}

@media screen and (max-width: 1919px) {
  .plate-title{
    display: inline-block;

    & > p {
      display: inline-block;
    }
    & > span{
      display: inline-block;
    }
    .plate-p{
      font-family: $DFYuanW7-GBK;
      vertical-align: top;
      background-color: $btn-border-color;
      min-width: 250px;
      //  width: 25%;

      .plate-text{
        display: inline-block;
        font-size: 22px;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 50px;
        height: 50px;
        margin-left: 50px;
        width: 100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
    }

    .plate-triangle{
      width: 54px;
      height: 0;
      border-bottom: 54px solid $btn-border-color;
      border-right: 35px solid transparent;
    }
    .plate-parallelogram{
      margin-left: 10px;
      width: 20px;
      height: 30px;
      -webkit-transform: skew(30deg);
      -moz-transform: skew(30deg);
      -o-transform: skew(30deg);
      background: $btn-border-color;
    }
  }
}

.v-plate-title{
  display: inline-block;

  & > p {
    display: inline-block;
  }
  & > span{
    display: inline-block;
  }
  .plate-p{
    font-family: $DFYuanW7-GBK;
    vertical-align: top;
    background-color: $btn-border-color;
    min-width: 250px;
    //  width: 25%;

    .plate-text{
      display: inline-block;
      font-size: 30px;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 50px;
      height: 50px;
      margin-left: 50px;
      width: 100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }

  .plate-triangle{
    width: 54px;
    height: 0;
    border-bottom: 54px solid $btn-border-color;
    border-right: 35px solid transparent;
  }
  .plate-parallelogram{
    margin-left: 10px;
    width: 20px;
    height: 30px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    background: $btn-border-color;
  }
}
